<template>
  <view class="video-meeting-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">视频班会</text>
        <text class="page-subtitle">在线会议管理</text>
      </view>
    </view>

    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-form">
        <view class="form-item">
          <text class="form-label">文件夹名称:</text>
          <uni-easyinput v-model="queryParams.folderName" placeholder="请输入文件夹名称" :clearable="true"
            @input="handleQuery" />
        </view>
        <view class="form-item">
          <text class="form-label">所属项目:</text>
          <view class="input-with-icon" :class="{ focused: projectFocused }" @click="showProjectPicker">
            <uni-icons type="folder" size="20" color="#999"></uni-icons>
            <view class="search-input inner" :class="{ placeholder: !getProjectNameById(queryParams.projectId) }">
              {{ getProjectNameById(queryParams.projectId) || '请选择项目' }}
            </view>
            
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="search-buttons"></view>
      </view>
    </view>

    <!-- 文件类型切换 -->
    <view class="type-section">
      <view class="type-buttons">
        <view v-for="(item, idx) in fileTypes" :key="item.value" class="type-card"
          :class="{ active: queryParams.fileType === item.value }" @click="handleTypeChange(item)">
          <view class="type-icon" :class="{ active: queryParams.fileType === item.value }">
            <text class="type-icon-text">{{ getTypeIcon(item, idx) }}</text>
          </view>
          <text class="type-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- MacosFileManager组件 -->
    <macos-file-manager :project-id="searchParams.projectId" :file-type="searchParams.fileType"
      :folder-name="searchParams.folderName" :canCreateFolder="true" :canUploadFile="true" :canDelete="true" />

    <!-- 项目选择弹窗 -->
    <uni-popup ref="projectPopup" type="bottom" :safe-area="false">
      <view class="project-picker">
        <view class="picker-header">
          <text class="picker-title">选择项目</text>
          <uni-icons type="closeempty" size="20" color="#999" @click="closeProjectPicker"></uni-icons>
        </view>
        <view class="picker-content">
          <view class="project-list">
            <view class="project-item" v-for="project in projectOptions" :key="project.id" @click="selectProject(project)"
              :class="{ selected: queryParams.projectId === project.id }">
              <view class="project-info">
                <text class="project-name">{{ project.projectName || project.name }}</text>
                <text class="project-desc">{{ project.projectDesc || project.description || '' }}</text>
              </view>
              <uni-icons v-if="queryParams.projectId === project.id" type="checkmarkempty" size="20" color="#007AFF"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MacosFileManager from '@/components/macos-file-manager/macos-file-manager.vue'
import { listAllProjectContractInfo, getDictData } from '@/api/production/file'

export default {
  name: 'VideoMeeting',
  components: {
    MacosFileManager
  },
  data() {
    return {
      projectOptions: [],
      projectIndex: 0,
      projectFocused: false,
      queryParams: {
        folderName: '',
        projectId: null,
        fileType: null
      },
      searchParams: {
        folderName: null,
        fileType: null,
        projectId: null
      },
      fileTypes: [
        { label: '早班', value: 'morning_meeting' },
        { label: '班后会', value: 'evening_meeting' },
        { label: '安全会', value: 'safety_meeting' },
        { label: '技术交底', value: 'technical_briefing' },
        { label: '其他会议', value: 'other_meeting' }
      ],
      projectIdToName: {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 简单按索引返回图标
    getTypeIcon(item, index) {
      const icons = ['🎥', '🎬', '📹', '🗣️', '📝', '📌', '📑', '📚']
      const i = Number.isFinite(index) ? index : 0
      return icons[(i % icons.length + icons.length) % icons.length]
    },
    // 初始化数据
    async initData() {
      await this.fetchProjectOptions()
      await this.fetchFileTypes()
      if (this.fileTypes.length > 0) {
        this.queryParams.fileType = this.fileTypes[0].value
      }
      this.handleQuery()
    },

    // 获取项目列表
    async fetchProjectOptions() {
      try {
        const res = await listAllProjectContractInfo()
        this.projectOptions = res.data || []

        if (this.projectOptions.length > 0) {
          this.queryParams.projectId = this.projectOptions[0].id
        }
        const map = {}
        this.projectOptions.forEach(o => { map[String(o.id)] = o.projectName || '' })
        this.projectIdToName = map
      } catch (error) {
        console.error('获取项目列表失败:', error)
        uni.showToast({
          title: '获取项目列表失败',
          icon: 'none'
        })
      }
    },

    // 获取文件类型字典
    async fetchFileTypes() {
      try {
        const res = await getDictData('video_class')
        if (res.data && res.data.length > 0) {
          this.fileTypes = res.data.map(item => ({
            label: item.dictLabel,
            value: item.dictValue
          }))
        }
      } catch (error) {
        console.error('获取文件类型失败:', error)
        // 使用默认文件类型
      }
    },

    // 项目选择交互（弹窗）
    showProjectPicker() {
      this.projectFocused = true
      this.$refs.projectPopup && this.$refs.projectPopup.open()
    },
    closeProjectPicker() {
      this.projectFocused = false
      this.$refs.projectPopup && this.$refs.projectPopup.close()
    },
    selectProject(project) {
      this.queryParams.projectId = project.id
      const idx = this.projectOptions.findIndex(p => p.id === project.id)
      this.projectIndex = idx >= 0 ? idx : 0
      this.closeProjectPicker()
      this.handleQuery()
    },
    clearProject() {
      this.queryParams.projectId = null
      this.projectIndex = 0
      this.handleQuery()
    },

    // 文件类型变化
    handleTypeChange(item) {
      this.queryParams.fileType = item.value
      this.handleQuery()
    },

    // 搜索
    handleQuery() {
      this.searchParams = {
        folderName: this.queryParams.folderName,
        fileType: this.queryParams.fileType,
        projectId: this.queryParams.projectId
      }
    },

    // 重置搜索
    resetQuery() {
      this.queryParams.folderName = ''
      this.projectIndex = 0
      if (this.projectOptions.length > 0) {
        this.queryParams.projectId = this.projectOptions[0].id
      }
      if (this.fileTypes.length > 0) {
        this.queryParams.fileType = this.fileTypes[0].value
      }
      this.handleQuery()
    },
    // 根据项目ID获取名称
    getProjectNameById(projectId) {
      if (projectId == null || projectId === '') return ''
      const key = String(projectId)
      const nameFromMap = this.projectIdToName && this.projectIdToName[key]
      if (nameFromMap) return nameFromMap
      const list = this.projectOptions
      const found = Array.isArray(list) ? list.find(p => String(p.id) === key || String(p.projectId) === key) : null
      return found ? (found.projectName || found.name || '') : String(projectId)
    }
  }
}
</script>

<style lang="scss" scoped>
.video-meeting-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 页面标题 */
.page-header {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
  padding: 60rpx 40rpx 80rpx;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30rpx;
    background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  letter-spacing: 2rpx;
  animation: slideInDown 0.8s ease-out;
}

.page-subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 1rpx;
  animation: slideInUp 0.8s ease-out 0.2s both;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 搜索区域 */
.search-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-form {
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .form-label {
    font-size: 28rpx;
    color: #333;
    width: 160rpx;
    flex-shrink: 0;
  }

  .form-input {
    flex: 1;
    height: 70rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e5e7eb;
    border-radius: 8rpx;
    font-size: 28rpx;
    background: #f9fafb;

    &:focus {
      border-color: #1890ff;
      background: #fff;
    }
  }

  .form-picker {
    flex: 1;
    height: 70rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e5e7eb;
    border-radius: 8rpx;
    background: #f9fafb;
    display: flex;
    align-items: center;

    .picker-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.search-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;

  .search-btn,
  .reset-btn {
    flex: 1;
    height: 70rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    border: none;
  }

  .search-btn {
    background: #1890ff;
    color: #fff;
  }

  .reset-btn {
    background: #f5f5f5;
    color: #666;
  }
}

/* 文件类型切换 */
.type-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
}

.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  padding: 10rpx;
  border-radius: 12rpx;
  border: 2rpx solid #e5e7eb;
  background: #f9fafb;
  transition: all 0.3s ease;

  &.active {
    border-color: #1890ff;
    background: #e6f7ff;
  }
}

.type-icon {
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48rpx;
}

.type-icon-text {
  font-size: 40rpx;
  line-height: 48rpx;
  color: #999;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.type-icon.active .type-icon-text {
  transform: scale(1.2);
  color: #1890ff;
}

.type-label {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  word-break: break-all;
}

/* 自定义项目选择输入，支持内容换行自动撑高 */
.input-with-icon {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 20rpx;
  transition: all 0.3s ease;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
.input-with-icon.focused {
  border-color: #007AFF;
  background: #fff;
  box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
}
.search-input {
  flex: 1;
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.search-input.inner {
  background: transparent;
  border: none;
  outline: none;
  white-space: normal;
  word-break: break-word;
}
.search-input.placeholder {
  color: #999;
}

/* 项目选择弹窗样式 */
.project-picker {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 60vh;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.picker-content {
  max-height: 50vh;
  overflow-y: auto;
}
.project-list {
  padding: 0 30rpx 30rpx;
}
.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.3s ease;
}
.project-item:last-child {
  border-bottom: none;
}
.project-item:active {
  background-color: #f8f9fa;
}
.project-item.selected {
  background-color: rgba(0, 122, 255, 0.05);
}
.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}
.project-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}
</style>